<template>
  <div>
    <el-col :span="5" class="left-top-area">
      <!--      实验选择-->
      <el-row>
        <span class="scheme-logo iconfont icon-fangan3"></span>
        <p class="scheme-choose">实验选择</p>
      </el-row>
      <!--      实验一区域-->
      <el-row>
        <div>
          <el-col>
            <button class="H_formation_design ex_btn" @click="ex_click(1)">步骤一：H型编队设计</button>
          </el-col>
          <el-col>
            <el-row>
              <p class="H_difficulty">难度</p>
              <div class="H_difficulty_logo" :class="{finish: status[0]}">
                <span class="iconfont icon-wurenji difficulty"></span>
                <span class="iconfont icon-wurenji difficulty"></span>
              </div>
            </el-row>
            <el-row>
              <button class="ex1_video ex_btn" @click="handleVideo(ex1_video_src)">演示视频1</button>
            </el-row>
          </el-col>
        </div>
      </el-row>
      <!--      实验二区域-->
      <el-row>
        <div>
          <el-col>
            <button class="H_change_design ex_btn" @click="ex_click(2)">步骤二：H型变换Z型路线设计</button>
          </el-col>
          <el-col>
            <el-row>
              <p class="H_change_difficulty">难度</p>
              <div class="H_change_difficulty_logo" :class="{finish: status[1]}">
                <span class="iconfont icon-wurenji difficulty"></span>
                <span class="iconfont icon-wurenji difficulty"></span>
                <span class="iconfont icon-wurenji difficulty"></span>
                <span class="iconfont icon-wurenji difficulty"></span>
              </div>
            </el-row>
            <el-row>
              <button class="ex2_video ex_btn" @click="handleVideo(ex2_video_src)">演示视频2</button>
            </el-row>
          </el-col>
        </div>
      </el-row>
      <!--      实验三区域-->
      <el-row>
        <div>
          <el-col>
            <button class="night_design ex_btn" @click="ex_click(3)">步骤三：夜间灯光设计</button>
          </el-col>
          <el-col>
            <el-row>
              <p class="night_difficulty">难度</p>
              <div class="night_difficulty_logo" :class="{finish: status[2]}">
                <span class="iconfont icon-wurenji difficulty"></span>
              </div>
            </el-row>
            <el-row>
              <button class="ex3_video ex_btn" @click="handleVideo(ex3_video_src)">演示视频3</button>
            </el-row>
          </el-col>
        </div>
      </el-row>
      <!--      实验四区域-->
      <el-row>
        <div>
          <el-col>
            <button class="expand_design ex_btn" @click="ex_click(4)">拓展步骤：N型变换Z型</button>
          </el-col>
          <el-col>
            <el-row>
              <p class="expand_difficulty">难度</p>
              <div class="expand_difficulty_logo" :class="{finish: status[3]}">
                <span class="iconfont icon-wurenji difficulty"></span>
                <span class="iconfont icon-wurenji difficulty"></span>
                <span class="iconfont icon-wurenji difficulty"></span>
                <span class="iconfont icon-wurenji difficulty"></span>
                <span class="iconfont icon-wurenji difficulty"></span>
              </div>
            </el-row>
            <el-row>
              <button class="ex4_video ex_btn" @click="handleVideo(ex4_video_src)">演示视频4</button>
            </el-row>
          </el-col>
        </div>
      </el-row>
    </el-col>

    <!--    参数设置区域-->
    <el-col :span="5" class="left-mid-area">
      <el-row>
        <span class="system_setting_logo iconfont icon-shujukongzhitai"></span>
        <p class="system_setting">系统参数</p>
      </el-row>
      <el-row>
        <p class="plane_number">无人机数量</p>
        <input type="number" class="plane_number_input" value="13" disabled="true">
      </el-row>
      <el-row>
        <p class="min_safe_distance">最低安全距离</p>
        <input type="number" class="min_safe_distance_input" value="200" disabled="true">
      </el-row>
      <el-row>
        <p class="long_control_distance">最远控制距离</p>
        <input type="number" class="long_control_distance_input" value="10" disabled="true">
      </el-row>
    </el-col>
    <!--    演示视频-->
    <el-dialog
      :visible.sync="dialogVideoVisible"
      width="800"
      height="480"
      :before-close="handleCloseVideo"
      :modal-append-to-body='false'>
      <video ref="videoPlay" controls style="width:100%; height:100%; object-fit: fill" :src="videoUrl"
             v-if="dialogVideoVisible">
        <!--        id="myVideo"-->
        <source :src="videoUrl" type="video/mp4">
      </video>
      <span slot="footer" class="dialog-footer">
      <el-button @click="handleCloseVideo">关闭</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {getStatus} from 'network/experiment/experimentPage'

export default {
  name: "ex_nothing_left",
  data() {
    return {
      status: [],
      ex1_video_src: "http://cdn.hsueh.club/%E6%BC%94%E7%A4%BA%E8%A7%86%E9%A2%911.mp4",
      ex2_video_src: "http://cdn.hsueh.club/%E6%BC%94%E7%A4%BA%E8%A7%86%E9%A2%912.mp4",
      ex3_video_src: "http://cdn.hsueh.club/%E6%BC%94%E7%A4%BA%E8%A7%86%E9%A2%913.mp4",
      ex4_video_src: "http://cdn.hsueh.club/%E6%BC%94%E7%A4%BA%E8%A7%86%E9%A2%914.mp4",
      videoUrl: null,
      dialogVideoVisible: false,
    }
  },
  created() {
    // 获取实验完成情况
    getStatus()
      .then(res => {
        this.status = []
        for (let item of res.data) {
          this.status.push(item.status)
        }
      })
  },
  methods: {
    handleVideo(video_url) {
      console.log(video_url);
      this.videoUrl = video_url
      this.dialogVideoVisible = true;
      // this.$refs.video.src = video_url
      // this.$nextTick(() => {
      //   this.$refs.videoPlay.load();
      //   this.dialogVideoVisible = true;
      // })
    },
    ex_click(ex_num) {
      this.$emit('changeExperimentNo', ex_num)
    },
    handleCloseVideo() {
      this.dialogVideoVisible = false;
      // 关闭弹出框时 视频关闭播放
      // const video = document.getElementById('myVideo')
      // video.pause()
      // console.log(video);
    },
  }
}
</script>

<style scoped>
@import "../../../assets/css/experiment/ex_nothing/ex_nothing_left.css";
</style>
